<template>
  <div class="chart-container">
    <h2>数据统计图表</h2>
    <div class="chart-wrapper">
      <v-chart class="chart" :option="chartOption" />
    </div>
    <div class="controls">
      <button @click="updateData">更新数据</button>
      <button @click="changeChartType">切换图表类型</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

const chartType = ref('bar')
const chartOption = ref({
  title: {
    text: '月度销售数据',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销售额', '利润'],
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110],
      itemStyle: {
        color: '#5470c6'
      }
    },
    {
      name: '利润',
      type: 'bar',
      data: [20, 40, 30, 15, 12, 25],
      itemStyle: {
        color: '#91cc75'
      }
    }
  ]
})

const updateData = () => {
  const newData = chartOption.value.series.map(series => ({
    ...series,
    data: series.data.map(() => Math.floor(Math.random() * 200) + 50)
  }))
  
  chartOption.value = {
    ...chartOption.value,
    series: newData
  }
}

const changeChartType = () => {
  const types = ['bar', 'line', 'pie']
  const currentIndex = types.indexOf(chartType.value)
  const nextIndex = (currentIndex + 1) % types.length
  chartType.value = types[nextIndex]
  
  if (chartType.value === 'pie') {
    chartOption.value = {
      title: {
        text: '销售占比',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '销售额',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 120, name: '1月' },
            { value: 200, name: '2月' },
            { value: 150, name: '3月' },
            { value: 80, name: '4月' },
            { value: 70, name: '5月' },
            { value: 110, name: '6月' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
  } else {
    chartOption.value = {
      title: {
        text: chartType.value === 'line' ? '月度趋势图' : '月度销售数据',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['销售额', '利润'],
        top: '10%'
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          type: chartType.value,
          data: [120, 200, 150, 80, 70, 110],
          itemStyle: {
            color: '#5470c6'
          }
        },
        {
          name: '利润',
          type: chartType.value,
          data: [20, 40, 30, 15, 12, 25],
          itemStyle: {
            color: '#91cc75'
          }
        }
      ]
    }
  }
}

onMounted(() => {
  console.log('图表组件已加载')
})
</script>

<style scoped>
.chart-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.chart-wrapper {
  margin: 20px 0;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.chart {
  height: 400px;
  width: 100%;
}

.controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.controls button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.controls button:hover {
  background-color: #45a049;
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}
</style> 